<template>
    <div>
        <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb> -->
        <el-card class="box-card">
            <el-input placeholder="请输入搜索姓名" clearable v-model="search" @blur="blurSearchUser()">
                <el-button slot="append" icon="el-icon-search" @click="searchUser()"></el-button>
            </el-input>
            <el-button type="primary"  @click="dialogAddVisible = true">添加用户</el-button>
            <el-table :data="users" border style="width: 100%" stripe>
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="username" label="姓名"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="mobile" label="电话"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column label="状态">
                    <template #default="{ row }">
                        <el-switch v-model="row.mg_state" @change="modifyUserState(row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="180">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            size="mini"
                            @click="dilogOpenModifyUser(row)"
                        ></el-button>
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            @click="removeUser(row.id)"
                        ></el-button>
                        <el-button type="warning" icon="el-icon-setting" size="mini" @click="OpenModifyRoles(row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="params.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </el-card>
        <!-- 修改用户 -->
        <el-dialog title="修改用户" :visible.sync="dialogFormVisible">
            <el-form ref="modifyform" :model="modifyusers" :rules="$rules.user" >
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="modifyusers.username" autocomplete="off" disabled ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input v-model="modifyusers.email" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
                    <el-input v-model="modifyusers.mobile" autocomplete="off" ></el-input>
                </el-form-item>
            </el-form>
            <!-- <template v-slot:footer class="dialog-footer"> -->
            <template v-slot:footer class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dilogModifyUser()">修 改</el-button>
            </template>
        </el-dialog>
         <!-- 增加用户 -->
        <el-dialog title="添加用户" :visible.sync="dialogAddVisible">
            <el-form ref="addform" :model="addusers" :rules="$rules.user" >
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="addusers.username" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input v-model="addusers.password" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input v-model="addusers.email" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
                    <el-input v-model="addusers.mobile" autocomplete="off" ></el-input>
                </el-form-item>
            </el-form>
            <template v-slot:footer class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="dilogAddUser()">确 定</el-button>
            </template>
        </el-dialog>
         <!-- 分配权限用户 -->
        <el-dialog title="分配角色" :visible.sync="dialogModifyRolesVisible">
            <el-form ref="rolesform" :model="distributeroles" :rules="$rules.user" >
                <div>当前的用户：{{ distributeroles.username}}</div>
                <div>当前的角色：{{ distributeroles.role_name}}</div>
                <div>分配新角色：
                      <el-select v-model="distributeroles.roleId"  placeholder="请选择">
                        <el-option  v-for="(item, index) in roles" :key="index" :value="item.id" :label="item.roleName"></el-option>
                    </el-select>
                </div>
            </el-form>
            <template v-slot:footer class="dialog-footer">
                <el-button @click="dialogModifyRolesVisible = false">取 消</el-button>
                <el-button type="primary" @click="dilogModifyRoles()">确 定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            something:"",
            id:null,
            dialogFormVisible: false,
            dialogAddVisible:false,
            dialogModifyRolesVisible:false,
            total: 0,
            search: "",
            params: {
                pagenum: 1,
                query: "",
                pagesize: 5,
            },
            users: [],
            modifyusers: {
                email: "",
                mobile: "",
            },
            addusers:{
                username:"",
                password:"",
                email: "",
                mobile: "",
            },
            formLabelWidth: "120px",
            distributeroles:{
                username:"",
                role_name:"",
                roleId:null
            },
            roles:[]
        };
    },
    methods: {
        handleSizeChange(val) {
            this.params.pagenum = 1;
            this.params.pagesize = val;
            this.LoadUsers();
        },
        handleCurrentChange(val) {
            this.params.pagenum = 1;
            this.params.pagenum = val;
            this.LoadUsers();
        },
        dilogOpenModifyUser(row){
            this.dialogFormVisible = true
            this.modifyusers=row;
        },
        // 
        searchUser(){
            this.params.query=this.search
            this.LoadUsers()
        },
        // 添加新用户
        async dilogAddUser(){
            try {
                await this.$api.increaseUsers(this.addusers);
                this.dialogAddVisible = false
            } catch (error) {
                console.log(error)
            }
        },
        // 修改已存在用户
        async  dilogModifyUser(){
            try {
                await  this.$api.reviseUsers(this.modifyusers.id,this.modifyusers)  
                this.dialogFormVisible = false;
            } catch (error) {
                // console.log(error)
            }
        },
        // 从新分配权限
        async dilogModifyRoles(){
             await this.$api.reviseRolesUsers(this.distributeroles.id,this.distributeroles.roleId)
             this.dialogModifyRolesVisible=false;
             this.LoadUsers();
        },
        // 打开修改角色模态框
        async OpenModifyRoles(row){
             this.dialogModifyRolesVisible = true;
              this.distributeroles=row
              let result=await this.$api.getRoles();
              this.roles=result;              
        },
        // 删除用户
        async removeUser(id) {
            try {
                await this.$api.deleteUsers(id);
                this.LoadUsers();
            } catch (error) {
                //   console.log(error)
            }
        },
        // 初始化数据
        async LoadUsers() {
            try {
                let result = await this.$api.getUsers(this.params);
                this.users = result.users;
                this.total = result.total;
                this.params.pagenum = result.pagenum;
            } catch (error) {
                console.log(error);
            }
        },
        // 修改用户状态
        async modifyUserState(row) {
            try {
                await this.$api.getUsersState(row.id, row.mg_state);
            } catch (error) {
                console.log(error);
                row.mg_state = !row.mg_state;
            }
        },
    },
    created() {
        this.LoadUsers();
    },
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
    margin-bottom: 20px;
}
.el-input {
    margin-bottom: 20px;
    width: 400px;
    margin-right: 20px;
}
.block {
    margin-top: 50px;
}
</style>